<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>英标对照</title>
    <script
      src="https://qiuzhe.oss-cn-hangzhou.aliyuncs.com/cnd/vue.js"
      rel="script"
    ></script>
    <style>
      #app {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100vh;
      }
      h1 {
        margin: 20px;
      }
      input {
        width: 30px;
        margin-right: 20px;
      }
      .title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 200px;
      }
      .title h1 {
        height: 30px;
        font-size: 50px;
      }
      .button h1 {
        border: 1px solid rgb(230, 109, 109);
        text-align: center;
        padding: 10px;
      }
      .f18 {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="cent">
        <div class="page">
          范围：{{min}} -> {{max}}
          <br />
          <button @click="initPage(1,10)">1-10</button>
          <button @click="initPage(11,20)">11-20</button>
          <button @click="initPage(21,30)">21-30</button>
          <button @click="initPage(31,40)">31-40</button>
          <button @click="initPage(41,48)">41-48</button>
        </div>
        <div @click="excludeFlg = !excludeFlg" class="f18">
          是否排除基本字母：{{excludeFlg}}
        </div>
        <div @click="">
          先显示:{{ flgSave }} / {{ flg }}
          <span class="f18" @click="flgSave = 1">数字</span> /
          <span class="f18" @click="flgSave = 2">字母</span> /
          <span class="f18" @click="flgSave = 3">发yin</span>
        </div>

        <!-- <audio id="myAudio" controls></audio> -->
        <video
          v-show="flg == 4"
          controls="controls"
          id="myVideo"
          height="220"
          preload="auto"
          width="100%"
        >
          <source
            src="https://www.jiwake.com/yinbiaofayin/video/i.mp4"
            type="video/mp4"
          />
          无法播放视频，请使用支持HTML5的浏览器并确定其支持VIDEO标签。
        </video>
        <div class="title">
          <h1 class="t1">
            <span v-show="flg == 1 || flg == 0">{{ index + 1 }}</span>
          </h1>
          <h1 class="t2" @click="showValue(key)">
            <span v-show="flg == 2 || flg == 0">{{ nowLetter }}</span>
          </h1>
        </div>
      </div>

      <div class="button">
        <h1 @click="goto">换一个</h1>
        <h1 @click="carouselFlg=!carouselFlg">连续({{ carouselFlg }})</h1>
      </div>
    </div>

    <script>
      var audio = document.getElementById('myAudio')
      var myVideo = document.getElementById('myVideo')

      new Vue({
        el: '#app',
        data: {
          key: '1',
          value: '',
          min: localStorage.getItem('min'),
          max: localStorage.getItem('max'),
          values: [
            'iː',
            'ɪ',
            'e',
            'æ',
            'ɜː',
            'ə',
            'ʌ',
            'uː',
            'ʊ',
            'ɔː',
            'ɒ',
            'ɑː',
            'eɪ',
            'aɪ',
            'ɔɪ',
            'aʊ',
            'əʊ',
            'ɪə',
            'eə',
            'ʊə',
            'p',
            't',
            'k',
            'b',
            'd',
            'ɡ',
            'f',
            's',
            'ʃ',
            'θ',
            'h',
            'v',
            'z',
            'ʒ',
            'ð',
            'r',
            'tʃ',
            'tr',
            'ts',
            'dʒ',
            'dr',
            'dz',
            'm',
            'n',
            'ŋ',
            'l',
            'j',
            'w',
          ],
          mp4Url: [
            'i1.mp4',
            'i.mp4',
            'e.mp4',
            'ae.mp4',
            'e--.mp4',
            'e-.mp4',
            'ʌ.mp4',
            'u1.mp4',
            'u.mp4',
            'o1.mp4',
            'o.mp4',
            'a1.mp4',
            'ei.mp4',
            'ai.mp4',
            'oi.mp4',
            'au.mp4',
            'eu.mp4',
            'ir.mp4',
            'er.mp4',
            'ur.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
            '.mp4',
          ],
          exclude: 'abcdefghijklmnopqrstuvwxyz',
          excludeFlg: true,
          index: 0,
          flg: 1,
          flgSave: 3,
          carouselFlg: false,
          timeObj: null,
        },
        computed: {
          // 当前的英标
          nowLetter: function () {
            return this.values[this.index]
          },
        },
        watch: {
          carouselFlg: function (newFlg, oldFle) {
            if (newFlg == true) {
              this.timeObj = setInterval(this.goto, 2000)
            } else {
              clearInterval(this.timeObj)
            }
          },
        },
        created: function () {
          this.goto()
        },
        methods: {
          showValue(key) {
            this.value = this.map[key]
          },
          // 换一个题目
          goto() {
            if (this.flg == 3) {
              this.flg = 4
              this.playTheSound()
              return
            }
            if (this.flg == 4) {
              this.flg = 1
              return
            }
            if (this.flg != 0) {
              this.flg = 0
              return
            }
            this.next()
            if (this.excludeFlg) {
              while (this.exclude.indexOf(this.nowLetter) != -1) {
                this.next()
              }
            }
          },
          next() {
            this.index = this.getRandomInt(this.min - 1, this.max - 1)
            // this.flg = this.getRandomInt(1, 2)
            this.flg = this.flgSave
          },
          getRandomInt(min, max) {
            min = Math.ceil(min) // 向上取整
            max = Math.floor(max) // 向下取整
            return Math.floor(Math.random() * (max - min + 1)) + min // 包含 min 和 max
          },
          initPage(min, max) {
            localStorage.setItem('min', min)
            localStorage.setItem('max', max)
            this.min = min
            this.max = max
          },
          // 播放英标发硬
          playTheSound() {
            console.log('播放')
            this.playAudio(
              'https://www.jiwake.com/yinbiaofayin/video/' +
                this.mp4Url[this.index]
            )
          },
          playAudio(src) {
            myVideo.src = src
            // 视频加载完成后播放
            myVideo.addEventListener('canplay', function () {
              myVideo.play() // 视频可播放时开始播放
            })

            // 显示第一帧画面
            myVideo.addEventListener('loadeddata', function () {
              myVideo.currentTime = 0
            })
          },
        },
      })
    </script>
  </body>
</html>
